<template>
	<div class="yh_content foSi14 poRel">
		<div class="btn-group_top">
			<el-button type="primary" class="mar-right10 bac6b7" size="small">导出失败数据</el-button>
			<el-button type="primary" class="bac6b7" @click.stop="back" size="small">返回会员列表</el-button>
		</div>
		<div v-if="identification === 0">
			<div class="member-import-file">
				<div class="import-file-down dis disAl disJuC">
					<div class="file-down__item dis disAl">
						<svg-icon icon-class="importTpl" class="mar0" style="width: 40px;height: 40px;" />
						<span class="file-name">批量导入会员系统模版.xls</span>
						<span class="btn-down-tpl" data-type="1">点击下载</span>
					</div>
				</div>
				<div class="import-file-sel dis disAl">
					<div class="inp-sel-file dis disAl ">{{upText === 1?'请选择文件':upText === 2?'数据处理中,请耐心等待..':'数据处理成功'}}
					</div>
					<el-upload action="#" :http-request="handleAvatarSuccess" class="upImg1">
						<div class="que coFFF cuPo" style="background: #6b7cdd;height: 40px;line-height: 40px;">选择文件
						</div>
					</el-upload>
				</div>
				<div class="wid100 dis disJuC">
					<div class="que coFFF cuPo" @click.stop="xiaClick"
						style="background: #6b7cdd;height: 40px;line-height: 40px;">下一步</div>
				</div>
			</div>
			<div class="normal-description">
				<div class="normal-description__title">批量导入会员需知</div>
				<div class="normal-description__content">
					<div class="normal-description__item">
						<span class="normal-description__sort">1、</span>
						<div class="normal-description__text">导入前请先建立班级，导入班级需为系统已存在班级；</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">2、</span>
						<div class="normal-description__text">请使用系统模板进行填写，格式需和模板示例保持一致；</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">3、</span>
						<div class="normal-description__text">如会员已在该班级存在，不能重复导入，请手工修改；</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">2、</span>
						<div class="normal-description__text">每次只能导入500条，超过500条，请分批导入；</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="identification === 1" style="padding-top: 60px;">
			<div class="m-import-msgbox">
				<p class="m-import-msg">
					共<span>{{list.fenye.count}}</span>条数据，成功导入<span>0</span>条数据，如下<span>1</span>条数据导入失败。你可以手动添加失败数据或者<span
						class="mark">导出失败数据</span>调整后重新导入。</p>
			</div>
			<div class="m-data">
				<el-table :data="list.data.logs">
					<el-table-column label="姓名">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[0] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="性别">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[1] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="手机号">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[2] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="错误原因	">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[3] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="会籍顾问">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[4] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="入会时间">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[5] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="出生日期">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[6] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="证件类型">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[7] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="证件号码">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[8] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="渠道来源">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[9] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="* 卡类型">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[10] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="* 卡名称">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[11] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="卡号">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[12] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="发卡日期">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[13] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="开卡日期">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[14] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="有效期至">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[15] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="卡实际余额（次卡、储值卡必填）" width="260">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[16] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="初始余额（次卡、储值卡必填）" width="260">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[17] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="* 初始实收金额">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[18] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="备注">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[19] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="地址">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[20] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="会员卡备注">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[21] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="详细小区名称">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[22] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="职业类型">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[23] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="行为动态">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[24] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="婚姻情况">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[25] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="孕产情况">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[26] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="性格特征">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[27] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="收入情况">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[28] }}</div>
						</template>
					</el-table-column>
					<el-table-column label="错误原因">
						<template slot-scope="scope">
							<div class="dis disAl">{{ scope.row[29] }}</div>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
					@pagination="getList" />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo
	} from '@/api/member'
	export default {
		name: 'classMemberImport',
		components: {Pagination},
		data() {
			return {
				upText: 1,
				identification: 0,
				listQuery: {
					page: 1,
					limit: 0
				},
				total: 0
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.type = Number(query.type)
			var xuanList = [{
				name: '批量导入班课会员',
				url: '/course/classMemberImport',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
		},
		methods: {
			xiaClick() {
				if (this.upText === 3) {
					this.identification = 1
				} else {
					this.$message.error('数据处理中,请耐心等待..');
				}
			},
			back() {
				this.$router.go(-1)
			},
			getList(){},
			handleAvatarSuccess(file) {
				this.upText = 2
				let mf = new FormData()
				mf.append('file', file.file)
				// uploadimg(mf).then(response => {
				// 	const {
				// 		data
				// 	} = response
				// })
				this.upText = 3
				this.list = {
					"fenye": {
						"count": 1
					},
					"data": {
						"title": [
							"* 姓名",
							"* 性别",
							"* 手机号",
							"当前积分",
							"会籍顾问",
							"入会时间",
							"出生日期",
							"证件类型",
							"证件号码",
							"渠道来源",
							"* 卡类型",
							"* 卡名称",
							"卡号",
							"发卡日期",
							"开卡日期",
							"有效期至",
							"卡实际余额（次卡、储值卡必填）",
							"初始余额（次卡、储值卡必填）",
							"* 初始实收金额",
							"备注",
							"地址",
							"会员卡备注",
							"详细小区名称",
							"职业类型",
							"行为动态",
							"婚姻情况",
							"孕产情况",
							"性格特征",
							"收入情况",
							"错误原因"
						],
						"logs": [
							[
								"会员姓名",
								"男",
								12190807060,
								1,
								" 路飞",
								"1/2/2018",
								"1/1/2018",
								"身份证",
								"220000198509120000 ",
								"杂志报刊",
								"期限卡",
								"期限1天100",
								null,
								"7/1/2016",
								"3/14/2018",
								"7/1/2019",
								1,
								1,
								1,
								"对会员的备注",
								"会员详细地址",
								"对会员卡的备注",
								"详细小区名称",
								"职业类型",
								"行为动态",
								"未婚/已婚",
								"孕产情况",
								"性格特征",
								"收入情况",
								"会籍顾问不存在"
							]
						]
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 30px 63px;
	}

	.btn-group_top {
		text-align: right;
	}

	.import-from {
		position: absolute;
		top: 60px;
		left: 0;
		right: 0;
		height: 46px;
		border-bottom: 1px solid #d9d9d9;
		text-align: center;
	}

	.import-from__item_sel {
		width: 128px;
		background: #6b7cdd;
		border-radius: 4px 4px 0 0;
	}

	.member-import-file {
		padding: 40px 0 100px;
	}

	.import-file-down {
		margin: 0 auto;
		width: 740px;
		height: 50px;
	}

	.file-down__item {
		padding: 5px 0;
		height: 40px;
		line-height: 40px;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.member-import-file .file-name {
		margin: 0 20px;
		height: 40px;
		line-height: 40px;
	}

	.import-file-down .btn-down-tpl {
		font-weight: 700;
		color: #6b7cdd;
		cursor: pointer;
	}

	.import-file-sel {
		margin: 40px auto;
		width: 450px;
		height: 40px;
	}

	.inp-sel-file {
		width: 330px;
		height: 40px;
		padding: 0 10px;
		margin-right: 10px;
		border: 1px solid #6b7cdd;
		color: #787878;
		box-sizing: border-box;
	}

	::v-deep .el-upload-list {
		display: none !important;
	}

	.normal-description {
		padding-top: 30px;
		margin-bottom: 5px;
	}

	.normal-description__title {
		font-size: 12px;
		color: #787878;
		height: 22px;
	}

	.normal-description__content {
		padding: 12px 20px;
		background: #f6f6f6;
		line-height: 30px;
	}

	.normal-description__item {
		position: relative;
		padding-left: 25px;
		line-height: 1.8;
	}

	.normal-description__sort {
		position: absolute;
		left: 0;
		top: 0;
	}

	.warn {
		color: #ff1f1f;
	}

	.m-import-msgbox {
		padding: 0 63px;
	}

	.m-import-msg {
		background: #fff;
		padding: 10px 20px;
	}

	.m-import-msg span {
		color: #ff1f1f;
		margin: 0 3px;
	}

	.m-import-msg .mark {
		color: #6b7cdd;
		cursor: pointer;
	}

	.m-data {
		padding: 0 63px 20px;
	}

	/* 设置滚动条宽度和高度 */
	::v-deep .el-table__body-wrapper::-webkit-scrollbar {
		width: 20px;
		/* 横向滚动条 */
		height: 8px;
		/* 纵向滚动条 必写 */
	}

	/* 设置滚动条样式 */
	::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
		background-color: #dde;
		border-radius: 3px;
	}

	::v-deep .el-table__row {
		background-color: #f2f2f2;
	}

	/* 修改鼠标经过表格的颜色 */
	::v-deep .el-table tbody tr:hover>td {
		background-color: #616b74 !important;
		color: #ffffff;
	}
	::v-deep .el-table th.is-leaf, .el-table td{
		border-bottom: none;
	}
	::v-deep .el-table::before{
		display: none;
	}
	::v-deep .el-table--scrollable-x .el-table__body-wrapper {
	    scrollbar-width: thin;
	}
</style>
